/**
* 头部菜单
*/ 
<style>
/* 修改全局菜单展开 */
.el-menu--popup-bottom-start {
  margin-right: 15px;
}
</style>
<template>
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    text-color="#ccc"
    active-text-color="#f00"
  >
    <div class="head_left">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          v-for="(level, index) in levelList"
          :key="index"
          :to="level.path"
        >
          {{ level.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div id="head">
      <div class="nactione">
        <!-- <el-badge :value="12" class="item">
          <i class="iconfont">&#xe6b7;</i>
        </el-badge> -->
      </div>
      <img src="../assets/img/head.png" alt="" class="headImg" />
      <!-- <div class="user_name_c"><span>张三三三</span></div> -->
      <div class="user_name_c">
        <span>{{ userName }}</span>
      </div>
      <el-submenu index="2" class="submenu" collapse-transition="true">
        <div id="set">
          <!-- <el-menu-item index="2-1" class="">
            <i class="el-icon-setting"></i>设置
          </el-menu-item>
          <el-menu-item @click="content()" index="2-2" class="centers">
            <i class="el-icon-user"></i>个人中心
          </el-menu-item> -->
          <el-menu-item @click="exit()" index="2-3" class="centers">
            <i class="el-icon-right"></i>退出
          </el-menu-item>
        </div>
      </el-submenu>
    </div>
  </el-menu>
</template>
<script>
import { loginout } from "../api/userMG";
import { mapState, mapMutations } from "../vuex/store";
export default {
  name: "navcon",
  data() {
    return {
      userName: "", // 用户名
      collapsed: true,
      imgshow: require("../assets/img/show.png"),
      imgsq: require("../assets/img/sq.png"),
      user: {},
      notify: {}, //消息通知
      levelList: [],
    };
  },
  watch: {
    $route(route) {
      this.getBreadcrumb();
    },
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.userName = this.$store.state.userName;
    this.getBreadcrumb();
    this.user = JSON.parse(localStorage.getItem("userdata"));
  },
  methods: {
    // 退出登录
    exit() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
          var storage = window.localStorage;
          storage.clear();
          setTimeout(() => {
            this.$store.commit("logout", "false");
            this.$router.push({ path: "/login" });
            this.$message({
              type: "success",
              message: "已退出登录!",
            });
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    getBreadcrumb() {
      // 1.获取当前的name,path,breadNumber
      var newName = this.$route.meta.title;
      var newPath = this.$route.path;
      var newBreadNum = this.$route.meta.breadNumber;

      // 2.获取前一页存下的name,path,breadNumber
      var routerInfo =
        JSON.parse(window.localStorage.getItem("routerInfo")) || [];
      this.levelList = routerInfo;

      // 3.判断是否是第一层，即初始位置，如果是第一层，分两种情况
      if (this.$route.meta.breadNumber === 1) {
        // 3.1 localStorage有值，那么this.levelList不是空值，说明是由上一个主路由进来的，需要清空之前localStorage的值，并且重新赋值给levelList
        if (this.levelList.length != 0) {
          localStorage.removeItem("routerInfo");
          this.levelList = [];
        }
        // 3.2 localStorage没有值，说明就是第一次进主路由，直接赋值
        this.levelList.push({
          name: newName,
          path: newPath,
          breadNumber: newBreadNum,
        });
        // 按照数组格式的方式存放
        window.localStorage.setItem(
          "routerInfo",
          JSON.stringify(this.levelList)
        );
      } else {
        // 4.breadNumber不等于1时，那么this.levalList一定不是空值，判断获取到的这个breadNumber在数组中是否存在
        var isBreadNumber = false;
        for (var i = 0; i < this.levelList.length; i++) {
          if (this.levelList[i].breadNumber == newBreadNum) {
            // return true; // 为true时表示数组内已存在 false表示不存在
            isBreadNumber = true;
            break; //在这里不用return，return会终止循环
          }
        }

        // 4.1 如果存在，说明是所有路由展示已经完（或者是展示了前面几个，然后点击面包屑），点击面包屑上其中的一个标签
        //就要删掉这个后面的所有值，并且将点击所获得的的这个值存进this.levalList数组中
        if (isBreadNumber) {
          //删除点击的后面所有信息，localStorage中的数据也要删除（这里的删除是截取，而不是完全删除），然后将该信息添加进去
          //要注意的是，这里的变化还有可能是点击面包屑时产生的，其他地方通常是通过路由跳转得到的
          // 注意这里splice的用法，如果直接写在localStorage.setItem 中，得到的值是被截取的值，而不是截取后的值
          routerInfo.splice(newBreadNum, routerInfo.length - newBreadNum);
          window.localStorage.setItem("routerInfo", JSON.stringify(routerInfo));
        } else {
          // 4.2 如果不存在，说明是按照顺序进行的,如一级跳到二级，再从二级跳到三级
          //把它存到localStorage中，并把值给this.leavalList数组
          this.levelList.push({
            name: newName,
            path: newPath,
            breadNumber: newBreadNum,
          });
          window.localStorage.setItem(
            "routerInfo",
            JSON.stringify(this.levelList)
          );
        }
      }
    },
    // 消息通知跳转-订单列表
    linkOrder() {
      this.$router.push("/pay/OrderList");
    },
    // 切换显示
    toggle(showtype) {
      this.collapsed = !showtype;
      this.$root.Bus.$emit("toggle", this.collapsed);
    },
  },
};
</script>
<style scoped>
/* 左侧菜单路由跳转 */
.head_left {
  height: 55px;
  margin-left: 35px;
  display: flex;
  align-content: center;
  align-items: center;
  float: left;
}
/********************************************************************* 消息提示 ************************************************************/
/* 通知 */
.nactione {
  margin-top: 8px;
  margin-right: 20px;
}
.hearts {
  right: 3px;
  top: -3px;
  width: 6px;
  height: 6px;
  background: #fc5531;
  border-radius: 8px;
  color: #fff;
  position: absolute;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}
/deep/.el-menu-item.is-active {
  color: #757993 !important;
  background-color: #fff !important;
}
/deep/.el-menu-item {
  color: #8a8989 !important;
}
/deep/ .el-menu-item i {
  color: #8a8989;
}
.el-menu.el-menu--horizontal {
  background-color: #fff;
  height: 3.6rem;
  border-radius: 5px;
  overflow: hidden;
}
.notice {
  width: 89%;
  float: left;
  text-align: right;
  position: absolute;
}
.notice img {
  width: 1.35%;
  margin-top: 0.2rem;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}
#head {
  overflow: hidden;
  display: flex;
  align-items: center;
  /* width: 240px; */
  width: 146px;
  float: right;
  margin-right: 2%;
}
.headImg {
  display: inline-block;
  width: 20%;
  /* width: 12%; */
  height: 20%;
  margin-left: 5%;
}
/* 用户名称样式 */
.user_name_c {
  padding: 0 0 0 5px;
  /* min-width:57px; */
  min-width: 45px;
  color: #8a8989;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.submenu {
  width: 100px;
  /* margin-top: 11px; */
  background-color: #fff;
}
/deep/ .el-submenu__title {
  max-width: 40px;
  padding-right: 0;
  padding-left: 35px;
  margin-top: 4px;
  font-size: 14px;
  color: #8a8989 !important;
}
.buttonimg {
  height: 60px;
  background-color: transparent;
  border: none;
}
.showimg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 17px;
  left: 17px;
}
.showimg:active {
  border: none;
}
#set {
  background-color: #fff;
  border: 1px solid #fff;
}
/deep/ .el-submenu__title:hover {
  background-color: #fff;
}
</style>